<template>
  <div class="app-container">
    <!-- 创建量表对话框 -->
    <el-dialog :visible.sync="scaleDialogVisible"
               title="创建一个量表"
               width="30%"
               :before-close="handleClose">
      <el-form :model="scaleInfoForm"
               ref="scaleInfoFormRef"
               label-width="130px">
        <el-form-item label="评价量表名称" prop="title">
          <el-input v-model="scaleInfoForm.title"/>
        </el-form-item>
        <el-form-item label="评价量表相关领域" prop="domain">
          <el-select placeholder="请选择当前量表关联领域"
                     v-model="scaleInfoForm.domain">
            <el-option v-for="(item, index) in fuItemList"
                       :key="index"
                       :label="item"
                       :value="index+1"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="scaleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createScale">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!-- 评价量表内容表格 -->
    <div class="scale_content_bar">
      <el-descriptions class="margin-top"
                       title="评价量表信息"
                       :column="3"
                       border>
        <el-descriptions-item label="标题">{{ scaleInfoForm.title }}</el-descriptions-item>
        <el-descriptions-item label="领域">{{ scaleInfoForm.domain }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small">创建中</el-tag>
        </el-descriptions-item>
      </el-descriptions>
      <el-button-group class="table_button_bar">
        <el-button round @click="showItemDialog()">添加评价内容</el-button>
      </el-button-group>
      <el-table class="scale_content_table"
                highlight-current-row border stripe
                :data="scaleContentList"
                :cell-class-name="cell"
                type="index"
                ref="scaleContentTable">
        <el-table-column label="细则"
                         align="center"
                         width="200">
          <template slot-scope="{row, $index}">
            <el-button type="primary" size="mini" @click="editItem(row, $index)">+ 插入</el-button>
            <el-button size="mini" @click="editItem(row, $index)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="评价内容"
                         prop="itemContent"
                         align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.itemContent"
              v-if="scope.row.editable"
              autocomplete="off"
              size="small"
              placeholder="请输入内容"
            ></el-input>
            <span v-else>{{scope.row.itemContent}}</span>
          </template>
        </el-table-column>
        <el-table-column label="层级"
                         prop="itemLevel"
                         width="50"
                         align="center"/>
        <el-table-column label="分值"
                         prop="itemScore"
                         width="100"
                         align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.itemScore"
              v-if="scope.row.editable"
              autocomplete="off"
              size="small"
              type="number"
            ></el-input>
            <span v-else>{{scope.row.itemScore}}</span>
          </template>
        </el-table-column>
        <el-table-column label="测试方法"
                         prop="evaluationMethod"
                         align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.evaluationMethod"
              v-if="scope.row.editable"
              autocomplete="off"
              size="small"
              placeholder="请输入测试方法"
            ></el-input>
            <span v-else>{{scope.row.evaluationMethod}}</span>
          </template>
        </el-table-column>
        <el-table-column label="评价者"
                         prop="evaluators"
                         align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.evaluators"
                       v-if="scope.row.editable"
                       multiple>
              <el-option
                v-for="item in identityList"
                :label="item.identity"
                :value="item.identity"
              >
              </el-option>
            </el-select>
            <span v-else>{{scope.row.evaluators}}</span>
          </template>
        </el-table-column>
        <el-table-column label="备注"
                         prop="remark"
                         align="center">
          <template slot-scope="scope">
            <el-input
              v-model="scope.row.remark"
              v-if="scope.row.editable"
              autocomplete="off"
              size="small"
              placeholder="请输入备注"
            ></el-input>
            <span v-else>{{scope.row.remark}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         align="center">
          <template slot-scope="{row, $index}">
            <el-button type="primary" size="mini" @click="editItem(row, $index)">{{row.editable?'完成':'编辑'}}</el-button>
            <el-button type="danger" size="mini" @click="deleteItem(row, $index)">删除</el-button>
            <el-button type="success" size="mini" @click="addSubItem(row, $index)">+添加子条目</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 创建评价内容对话框 -->
    <el-dialog :visible.sync="itemDialogVisible"
               title="创建评价内容"
               width="30%"
               :before-close="handleClose">
      <br/>
      <el-form :model="itemContentForm"
               ref="scaleInfoFormRef"
               label-width="100px">
        <el-form-item label="评价内容" prop="itemContent">
          <el-input v-model="itemContentForm.itemContent"/>
        </el-form-item>
        <el-form-item label="分值" prop="itemScore">
          <el-input v-model="itemContentForm.itemScore"/>
        </el-form-item>
        <el-form-item label="评价方式" prop="evaluationMethod">
          <el-input v-model="itemContentForm.evaluationMethod"/>
        </el-form-item>
        <el-form-item label="评价者" prop="evaluators">
          <el-select v-model="itemContentForm.evaluators"
                     multiple>
            <el-option
              v-for="item in identityList"
              :key="item.identityId"
              :label="item.identityInfo"
              :value="item.identityInfo"/>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="itemContentForm.remark"/>
        </el-form-item>
      </el-form>
      <!-- 对话框底部 -->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="itemDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="createItem">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>

    <!-- 创建细则对话框 -->
    <el-dialog :visible.sync="detailDialogVisible"
               :title="selectedItem.name"
               :before-close="handleClose">
      <el-switch v-model="isAllGrade"
                 size="large"
                 active-text="全年级"
                 inactive-text="选择年级"
                 @change="changeGrade"/>
      <br/>
      <el-button-group v-if="!isAllGrade">
        <template v-for="(grade, index) in gradeList">
          <el-button @click="selectGrade(index)">{{ grade }}</el-button>
        </template>
        <span>当前选择的年纪是：{{ gradeList[selectedGrade-1] }}</span>
      </el-button-group>
      <!-- 全年级细则管理框 -->
      <div class="detail-block">
        <div class="block-left">
          <!-- 全年级细则输入框 -->
          <div class="create-detail" style="margin-bottom: 5px">
            <el-input placeholder="添加一项细则" v-model="detailName"></el-input>
            <el-button type="success" @click="insertDetail">+ 添加</el-button>
          </div>
          <!-- 全年级细则名展示列表 -->
          <div class="detail-list">
            <el-scrollbar max-height="300px" style="background-color: white">
              <template v-for="(item, index) in detailNameList[selectedGrade-1]">
                <div class="detail-name-block">
                  <span style="width: 220px" size="large" @click="chooseDetail(item, index)">{{ index+1 }} . {{ item }}</span>
                  <el-button size="small" type="danger" plain round @click="deleteDetail(index)">删除</el-button>
                </div>
              </template>
            </el-scrollbar>
          </div>
        </div>
        <div class="block-right">
          <el-switch v-model="isDataType"
                     size="large"
                     active-text="数据换算成绩"
                     inactive-text="直接输入成绩"/>
          <p>当前管理细则为：“{{ showDetailContent[0].name }}”</p>
          <el-table :data="showDetailContent">
            <el-table-column label="等级"
                             prop="level"
                             width="80px"
                             align="center"/>
            <el-table-column label="分数范围"
                             align="center">
              <el-table-column label="下限"
                               prop="scoreMin"
                               align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.scoreMin" style="width: 50px" />
                </template>
              </el-table-column>
              <el-table-column label="上限"
                               align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.scoreMax" style="width: 50px" />
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column v-if="isDataType"
                             label="参数范围"
                             align="center">
              <el-table-column label="下限"
                               prop="scoreMin"
                               align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.dataMin" style="width: 50px" />
                </template>
              </el-table-column>
              <el-table-column label="上限"
                               align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.dataMax" style="width: 50px" />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
          <el-button type="primary" @click="saveDetailContent">保存</el-button>
        </div>
      </div>

      <!-- 对话框底部 -->
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="detailDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="detailsSubmit">
          提交
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteItemContent,
  getFuScaleId,
  getItemContent,
  insertFuScale,
  insertScaleContent
} from '@/api/fuScale'
import {
  insertDetailList,
} from '@/api/fuRule'
import {getIdentity} from '@/api/user'
export default {
  name: "evaluateDimension",
  data() {
    return {
      // 显示控制参数 -- 量表信息创建对话框
      scaleDialogVisible: true,
      // 显示控制参数 -- 评价内容创建对话框
      itemDialogVisible: false,
      // 显示控制参数 -- 细则内容创建对话框
      detailDialogVisible: false,
      // 细则创建框 -- 是否为全年级
      isAllGrade: true,
      // 五育下拉框数据来源
      fuItemList: ['德育', '智育', '体育', '美育', '劳育'],
      // 年级数据
      gradeList: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
      // 评价量表表头内容
      scaleInfoForm: {
        id: null,
        title: '',
        createDate: null,
        state: 0,
        creatorId: null,
        domain: null
      },
      // 评价内容表单
      itemContentForm: {
        scaleId: null,
        itemContent: '',
        itemLevel: 1,
        preItem: '',
        itemScore: null,
        evaluationMethod: '',
        evaluators: '',
        remark: '',
      },
      // 正在添加细则的评价内容
      selectedItem: {
        id: null,
        name: '',
      },
      // 评价量表内容数列
      scaleContentList: [],

      /* 细则添加界面 */
      // 选择的年级
      selectedGrade: 1,
      // 细则命名
      detailName: '',
      // 左侧列表内容(六个括号对应六个年级)
      detailNameList: [[], [], [], [], [], []],
      // 选择的细则序号
      selectedDetailNum: null,
      // 细则得分层级数组
      showDetailContent: [
        {scaleId: null, itemId: null, name: null, level: '优秀', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        {scaleId: null, itemId: null, name: null, level: '良好', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        {scaleId: null, itemId: null, name: null, level: '及格', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        {scaleId: null, itemId: null, name: null, level: '不及格', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
      ],
      // 判断当前细则是否为直接输入成绩（false）或数据换算成绩（true）
      isDataType: false,
      // 细则对象列表(六个括号对应六个年级)
      detailsList: [[], [], [], [], [], []],
      // 测试者数列
      identityList: [],
      // 提示框是否显示
      showTable: false,
    };
  },

  created(){
    this.scaleInfoForm.creatorId = JSON.parse(sessionStorage.getItem('userInfo')).userId
    // 获取测试人员列表
    getIdentity().then(res => {
      this.identityList = res.data
    })
  },
  methods: {
    // 按钮点击事件 -- 量表基本信息提交
    createScale () {
      // 获取当前事件，并格式化为 ‘年-月-日’ 形式
      let nowDate = new Date();
      let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate()
      }
      this.scaleInfoForm.createDate = date.year + '-' + date.month + '-' +date.date
      insertFuScale(this.scaleInfoForm).then(res => {
        if (res.code == 200) {
          getFuScaleId().then(res => {
            this.scaleInfoForm.id = res.data
            this.scaleDialogVisible = false;
          })
        } else {
          this.scaleInfoForm = {
            id: null,
              title: '',
              createDate: null,
              state: 0,
              creatorId: null,
              domain: null
          };
        }
      })
    },

    // 表格层级操作函数，可以直接获得表格行、列信息
    cell({row, column, rowIndex, columnIndex}) {

    },

    // 按钮点击事件 -- 评价内容添加对话框弹出
    showItemDialog (preItem, level) {
      // 初始化评价内容对象
      this.itemContentForm = {
        scaleId: null,
        itemContent: '',
        itemLevel: level==undefined?1:level+1,
        preItem: preItem==undefined?'':preItem,
        itemScore: null,
        evaluationMethod: '',
        evaluators: '',
        remark: '',
      };
      console.log(this.itemContentForm);
      this.itemDialogVisible = true;
    },

    // 按钮点击事件 -- 评价内容提交，返回数据库插入结果并添加到显示数组中
    createItem () {
      this.itemContentForm.scaleId = this.scaleInfoForm.id
      let evaluators = this.itemContentForm.evaluators.toString();
      this.itemContentForm.evaluators = evaluators;

      insertScaleContent(this.itemContentForm).then(res => {
        if (res.code == 200) {
          getItemContent().then(res => {
            this.scaleContentList.push(res.data);
          })
        }
      })

      this.itemDialogVisible = false;
      this.itemContentForm = {
        scaleId: null,
        itemContent: '',
        itemLevel: 1,
        preItem: '',
        itemScore: null,
        evaluationMethod: '',
        evaluators: '',
        remark: '',
      };
    },

    // 按钮点击事件 -- 为评价内容插入评价细则（评价细则创建界面显示）
    editItem (row) {
      this.detailDialogVisible = true;
      this.selectedItem.id = row.itemId;
      this.selectedItem.name = row.content;
    },

    // 按钮点击事件 -- 删除评价内容并更新显示数组
    deleteItem (row, $index) {
      deleteItemContent(row.itemId).then(res => {
        console.log(res.data);
        if(res.data == 1) {
          this.scaleContentList.splice($index, 1);
          console.log("删除记录成功");
        }
      })
    },

    // 按钮点击事件 -- 为当前评价内容新增子条目
    addSubItem (row) {
      let preItem = row.itemContent;
      let level = row.itemLevel;
      this.showItemDialog(preItem, level);
    },

    // 按钮点击事件 -- 评价细则项添加
    insertDetail() {
      if(this.detailName.trim() != '') { // 如果细则输入框不为空，就向列表添加
        let scaleId = this.scaleInfoForm.id;
        let itemId = this.selectedItem.id;
        let name = this.detailName;
        let grade = this.selectedGrade;
        this.detailNameList[this.selectedGrade-1].push(name);
        this.detailsList[this.selectedGrade-1].push([
          {scaleId, itemId, name, level: '优秀', grade, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
          {scaleId, itemId, name, level: '良好', grade, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
          {scaleId, itemId, name, level: '及格', grade, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
          {scaleId, itemId, name, level: '不及格', grade, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        ]);
        // 向列表添加后初始化细则名输入框
        this.detailName = '';
      }
    },

    // 开关切换事件 -- 切换全年级还是单独年级
    changeGrade() {
      let scaleId = this.scaleInfoForm.id;
      let itemId = this.selectedItem.id;
      // 切换后清空数据
      this.detailName = "";
      this.detailNameList = [[], [], [], [], [], []];
      this.detailsList = [[], [], [], [], [], []];
      this.showDetailContent = [
        {scaleId, itemId, name: null, level: '优秀', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        {scaleId, itemId, name: null, level: '良好', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        {scaleId, itemId, name: null, level: '及格', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
        {scaleId, itemId, name: null, level: '不及格', grade: null, scoreMin: null, scoreMax: null, dataMin: null, dataMax: null, isDataType: false},
      ];
    },

    // 按钮点击事件 -- 细则创建页面，选择年级查看对应的细则数组
    selectGrade(gradeNum) {
      this.selectedGrade = gradeNum+1;
    },

    // div点击事件 -- 细则创建界面，点击一个细则名可以查看该细则内容
    chooseDetail(item, index) {
      this.selectedDetailNum = index;
      console.log(this.detailsList);
      this.showDetailContent = this.detailsList[this.selectedGrade-1][index];
      console.log(this.detailsList[this.selectedGrade-1][index]);
      this.isDataType = this.detailsList[this.selectedGrade-1][index][0].isDataType;
      console.log(this.detailsList[this.selectedGrade-1][index][0]);
    },

    // 按钮点击事件-- 细则创建界面，删除一个已有的细则及其内容
    deleteDetail(index) {
      this.detailNameList[this.selectedGrade-1].splice(index, 1);
      this.detailsList[this.selectedGrade-1].splice(index, 1)
    },

    // 按钮点击事件 -- 细则创建界面，保存细则内容
    saveDetailContent() {
      // 获取关键数据
      let isDataType = this.isDataType;               // 当前细则数据输入形式
      let selectedGrade = this.selectedGrade;         // 当前选择的年级
      let selectedDetailNum = this.selectedDetailNum; // 当前正在修改的细则序号
      let showDetailContent = this.showDetailContent; // 当前正在修改的细则内容
      showDetailContent.forEach(detail => { // 将当前正在修改的细则内容中的数据输入格式修改
        detail.isDataType = isDataType;
      })
      this.detailsList[selectedGrade][selectedDetailNum] = showDetailContent; // 赋值到保存细则内容数组
    },

    detailsSubmit () {
      console.log(this.isAllGrade);
      console.log(this.detailsList);
      insertDetailList(this.isAllGrade, this.detailsList).then(res => {

      })
    },

    handleClose () {

    },
  }
}

</script>

<style scoped>

/* 评价量表内容创建区域设置 */
.scale_content_bar {
  border-radius: 15px;
  background-color: #c9e2b3;
  margin-top: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.detail-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
  .block-left {
    width: 30%;
    height: 430px;
    margin: 10px;
    padding: 10px;
    background-color: #eaeaea;
    border-radius: 15px;
  }
    .create-detail {
      display: flex;
      flex-direction: row;
      justify-content: center;
    }
    .detail-name-block {
      width: 95%;
      height: 80%;
      display: flex;
      align-items: center;
      margin: 10px;
      padding: 10px;
      border-radius: 40px;
      background-color: #eaf3fe;
    }
  .block-right {
    width: 65%;
    height: 430px;
    margin: 10px;
    padding: 10px;
    background-color: #eaeaea;
    border-radius: 15px;
  }
.table_button_bar {
  padding: 5px;
}
</style>

